<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>宿管管理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .title {
      font-size: 20px;
      font-weight: bold;
    }
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 445px;
    }
    .search-box input {
      margin-right: 10px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .button-group {
      display: flex;
    }
    .button-group button {
      margin-left: 10px;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .query-btn {
      background-color: #4CAF50;
      color: white;
    }
    .add-btn {
      background-color: #2196F3;
      color: white;
    }
    .export-btn {
      background-color: #9E9E9E;
      color: white;
    }
    .import-btn {
      background-color: #F44336;
      color: white;
    }
    .table-container {
      background-color: white;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f5f5f5;
    }
    tr:hover {
      background-color: #f9f9f9;
    }
    .action-buttons button {
      margin-left: 5px;
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: white;
    }
    button{
      margin-right: 8px;
      padding: 10px 15px;
      text-align: left;
      border-radius: 4px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
      font-size: 13px;
      border: none;
    }
    .edit-btn {
      background-color: #FFC107;
      color: white;
    }

    .delete-btn {
      color: white;
      background-color: #F44336;
    }
    .pagination {
      text-align: center;
      margin-top: 15px;
      color: #666;
    }
    .button-group button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;          /* 新增 */
  align-items: center;    /* 新增 */
  gap: 5px;               /* 新增 */
}
.action-buttons button {
      margin-left: 0;
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: white;
      display: flex;          /* 已有 */
      align-items: center;    /* 已有 */
      gap: 5px;               /* 已有 */
    }
    .action-buttons {
      display: flex;          /* 新增 - 使按钮容器使用flex布局 */
      gap: 5px;               /* 新增 - 控制按钮间距 */
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="title">宿管管理</div>
    <div class="search-box">
      <input type="text" id="userId" name="userId" placeholder="宿管编号">
      <input type="text" id="username" name="username" placeholder="姓名">
    </div>
    <div class="button-group">
      <button onclick="loadData()" class="query-btn"><svg t="1746532550209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2629" width="15" height="15"><path d="M747.95000029 667.43l197.39999971 197.39999971a56.90999971 56.90999971 0 0 1-80.52000029 80.49000058l-197.39999971-197.40000058a378.29999971 378.29999971 0 0 1-225.42000029 74.10000058C232.1 821.98999971 62 651.83000029 62 441.98 62 232.1 232.12999971 62 442.00999971 62c209.85000029 0 379.98 170.12999971 379.98 380.00999971a378.29999971 378.29999971 0 0 1-74.03999942 225.42000029z m-305.94000058 40.70999971a266.15999971 266.15999971 0 1 0 0-532.28999971 266.15999971 266.15999971 0 0 0 0 532.28999971z" p-id="2630" fill="#ffffff"></path></svg>查询</button>
      <button class="add-btn"><svg t="1746533128195" class="icon" viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22530" width="15" height="15"><path d="M405.333333 533.333333C275.925333 533.333333 170.666667 428.032 170.666667 298.666667s105.258667-234.666667 234.666666-234.666667S640 169.301333 640 298.666667s-105.258667 234.666667-234.666667 234.666666z m0-341.333333C346.538667 192 298.666667 239.829333 298.666667 298.666667s47.872 106.666667 106.666666 106.666666S512 357.504 512 298.666667s-47.872-106.666667-106.666667-106.666667z" fill="#ffffff" p-id="22531"></path><path d="M405.333333 960C283.477333 960 0 945.450667 0 810.666667c0-223.488 181.845333-405.333333 405.333333-405.333334S810.666667 587.178667 810.666667 810.666667c0 134.784-283.477333 149.333333-405.333334 149.333333z m-276.693333-168.021333c32.725333 16.469333 129.834667 40.021333 276.693333 40.021333s243.968-23.552 276.693334-40.021333C672.384 647.722667 551.978667 533.333333 405.333333 533.333333s-267.050667 114.389333-276.693333 258.645334zM1002.666667 362.666667h-256a64 64 0 1 1 0-128h256a64 64 0 1 1 0 128z" fill="#ffffff" p-id="22532"></path><path d="M874.666667 490.666667A64 64 0 0 1 810.666667 426.666667V170.666667a64 64 0 1 1 128 0v256a64 64 0 0 1-64 64z" fill="#ffffff" p-id="22533"></path></svg>新增</button>
      <button onclick="exportReport()" class="export-btn"><svg t="1746533309510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23593" width="15" height="15"><path d="M882.816 341.632L618.816 77.632c-11.2-11.2-26.432-13.248-42.048-13.248H144a16 16 0 0 0-16 16V944c0 8.832 7.168 16 16 16h736a16 16 0 0 0 16-16V383.232c0-15.232-1.984-30.464-13.184-41.6zM608 157.184L802.816 352H608V157.184zM832 896H192V128h352v272c0 8.832 7.168 16 16 16H832V896z" fill="#ffffff" p-id="23594"></path><path d="M400 518.784a16 16 0 0 0-22.784 0l-22.848 22.848a16 16 0 0 0 0 22.784l109.632 108.8-109.184 109.184a16 16 0 0 0 0 22.784l22.784 22.848a16 16 0 0 0 22.784 0l109.248-109.248 109.184 109.248a16 16 0 0 0 22.784 0l22.784-22.848a16 16 0 0 0 0-22.784l-109.184-109.184 108.416-109.248a16 16 0 0 0 0-22.784l-22.848-22.784a16 16 0 0 0-22.784 0l-108.8 109.632L400 518.72z" fill="#ffffff" p-id="23595"></path></svg>导出</button>
    </div>
  </div>

  <div class="table-container">
    <table id="adminTable">
      <thead>
      <tr>
        <th>宿管编号</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>

    <div class="pagination">
        <button class="btn-prev" onclick="loadData(currentPage-1)">上一页</button>
        <span id="pageInfo">第 1 页</span>
        <button class="btn-next" onclick="loadData(currentPage+1)">下一页</button>
    </div>
  </div>
  <!-- 在页面底部，script标签前添加模态框 -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">修改管理员信息</h2>
      <span class="close" onclick="closeEditModal()">&times;</span>
    </div>
    <form id="editForm">
      <input type="hidden" id="editUserId" name="userId">
      <div class="form-group">
        <label for="editUsername">姓名</label>
        <input type="text" id="editUsername" name="username" required>
      </div>
      <div class="form-group">
        <label for="editPhone">手机号</label>
        <input type="text" id="editPhone" name="phone" required>
      </div>
      <div class="form-group">
        <label for="editSex">性别</label>
        <select id="editSex" name="sex" required>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <button type="button" class="submit-btn" onclick="submitEdit()">提交修改</button>
    </form>
  </div>
</div>

<!-- 在页面底部，editModal后添加新增模态框 -->
<div id="addModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">新增管理员</h2>
      <span class="close" onclick="closeAddModal()">&times;</span>
    </div>
    <form id="addForm">
      <div class="form-group">
        <label for="addUsername">姓名</label>
        <input type="text" id="addUsername" name="username" required>
      </div>
      <div class="form-group">
        <label for="addPhone">手机号</label>
        <input type="text" id="addPhone" name="phone" required>
      </div>
      <div class="form-group">
        <label for="addSex">性别</label>
        <select id="addSex" name="sex" required>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addPassword">密码</label>
        <input type="password" id="addPassword" name="password" required>
      </div>
      <button type="button" class="submit-btn" onclick="submitAdd()">提交</button>
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>

  function exportReport() {
    if($('#adminTable tbody tr').length === 0){
      alert("没有数据可以导出");
      return;
    }
    const wb = XLSX.utils.table_to_book(document.getElementById("adminTable"));
    const filename = "宿管信息.xlsx";
    XLSX.writeFile(wb, filename);

  }


// 全局变量存储当前页码
var currentPage = 0;
var totalPages = 1;

// 加载数据函数
function loadData(page) {
    var userId = $("#userId").val();
    var username = $("#username").val();
    
    $.get("<%=request.getContextPath()%>/adminController", {
        op: "query",
        userId: userId,
        username: username,
        page: page || 0
    }, function(data) {
        updateTable(data);
    });
}

// 更新表格数据
function updateTable(data) {
    var jsonData = JSON.parse(data);
    var html = "";
    
    $.each(jsonData.list, function(index, admin) {
        html += '<tr>' +
            '<td>' + admin.userId + '</td>' +
            '<td>' + admin.username + '</td>' +
            '<td>' + admin.phone + '</td>' +
            '<td>' + admin.sex + '</td>' +
            '<td>' +
            '<button class="edit-btn" onclick="editAdmin(' + admin.userId + ')">修改</button>' +
            '<button class="delete-btn" onclick="deleteAdmin(' + admin.userId + ')">删除</button>' +
            '</td>' +
            '</tr>';
    });
    
    $("tbody").html(html);

    // 更新分页信息
    currentPage = jsonData.page;
    totalPages = jsonData.totalPages;
    $("#pageInfo").text("第 " + (currentPage + 1) + " 页/共 " + totalPages + " 页");
    $(".btn-prev").prop("disabled", currentPage <= 0);
    $(".btn-next").prop("disabled", currentPage >= totalPages - 1);
}


// 页面加载时初始化数据
$(document).ready(function() {
    loadData(0);
});



<!-- 在现有script中添加以下代码 -->
  // 打开修改模态框
  function openEditModal(userId, username, phone, sex) {
    $('#editUserId').val(userId);
    $('#editUsername').val(username);
    $('#editPhone').val(phone);
    $('#editSex').val(sex);
    $('#editModal').show();
  }

  // 关闭修改模态框
  function closeEditModal() {
    $('#editModal').hide();
    $('#editForm')[0].reset();
  }

  // 提交修改
  function submitEdit() {
    $.post("<%=request.getContextPath()%>/adminController", 
      $("#editForm").serialize() + "&op=xiugai",
      function(response) {
        if(response.success) {
          alert("修改成功");
          closeEditModal();
          loadData(); // 刷新数据
        }
      }, 'json');
  }

  // 修改表格行中的编辑按钮点击事件
  $(document).on('click', '.edit-btn', function() {
    var row = $(this).closest('tr');
    openEditModal(
      row.find('td:eq(0)').text(),
      row.find('td:eq(1)').text(),
      row.find('td:eq(2)').text(),
      row.find('td:eq(3)').text()
    );
  });

  // 在现有script中添加删除功能
function deleteAdmin(userId) {
    if(confirm('确定要删除该宿管信息吗？')) {
        $.post("<%=request.getContextPath()%>/adminController", 
            {op: "shanchu", userId: userId},
            function(response) {
                if(response.success) {
                    alert("删除成功");
                    loadData(); // 刷新数据
                }
            }, 'json');
    }
}

// 修改表格行中的删除按钮点击事件
$(document).on('click', '.delete-btn', function() {
    var userId = $(this).closest('tr').find('td:eq(0)').text();
    deleteAdmin(userId);
});



    // 打开新增模态框
    function openAddModal() {
      $('#addModal').show();
    }

    // 关闭新增模态框
    function closeAddModal() {
      $('#addModal').hide();
      $('#addForm')[0].reset();
    }

    // 提交新增
    function submitAdd() {
      $.post("<%=request.getContextPath()%>/adminController",
              $("#addForm").serialize() + "&op=tianjia",
              function(response) {
                if(response.success) {
                  alert("添加成功");
                  closeAddModal();
                  loadData(); // 刷新数据
                }
              }, 'json');
    }

    // 绑定新增按钮点击事件
    $('.add-btn').click(function() {
      openAddModal();
    });

</script>
</body>
</html>

<style>
  /* 新增模态框样式 */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  
  .modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 400px;
    border-radius: 5px;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .close {
    font-size: 28px;
    cursor: pointer;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input, 
  .form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .submit-btn {
    width: 100%;
    padding: 10px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>